<template>
  <div id="app">
    <h2>我是APP组件</h2>
<!--    <router-link to="/home" tag="button" active-class="active">首页</router-link>-->
<!--    <router-link to="/home" tag="button" >首页</router-link>-->
<!--    <router-link to="/about" >关于</router-link>-->
<!--    <button @click="homeClick">首页</button>-->
<!--    <button @click="aboutClick">关于</button>-->
<!--    <h2>HELLO</h2>-->
    <router-link to="/home">首页</router-link>
    <router-link to="/about">关于</router-link>
<!--    <router-link :to="'/user/' + pageUserId">用户</router-link>-->
<!--    <router-link :to="profileParam">档案</router-link>-->
    <button @click="userClick">用户</button>
    <button @click="profileClick">档案</button>
    <keep-alive exclude="Profile">
      <router-view></router-view>
    </keep-alive>
  </div>
</template>

<script>
export default {
  name: 'App',
  data() {
    return {
      pageUserId: 'kele1',
      profileParam: {
        path: '/profile',
        query: {
          name: 'kele',
          age: '18',
          height: '1.88'
        }
      }
    }
  },
  methods: {
    homeClick() {
      // this.$router.push('/home')
      this.$router.replace('/home')
      console.log('homeClick');
    },
    aboutClick() {
      // this.$router.push('/about')
      this.$router.replace('/about')
      console.log('aboutClick');
    },
    userClick() {
      this.$router.push('/user/' + this.pageUserId)
    },
    profileClick() {
      this.$router.push(this.profileParam)
    }
  }
}
</script>

<style>
  .router-link-active {
    color: red;
  }
  .active {
    color: green;
  }
</style>
